<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> -->
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <script>
        function Jq(arg) {
            if(typeof arg === "string"){
                // $("li")  --->arg = "li"
                // 传入一个字符串
                this.eles = document.querySelectorAll(arg);
            }else{
                // 传入一个对象进来 
                // 第二次实例化的时候会进入这个判断
                //  new Jq(this.eles[index]);
                this.eles  = arg;
            }
        }
        Jq.prototype.eq = function (index) {
            // return this.ele[index];
            // eq之后 实现链式 ，返还了一个新的实例化对象 
            // console.log(this.eles[index]);
            // console.log(this.eles[index]); // 原生的js对象
            // return this;
            return  new Jq(this.eles[index]);  // 返还了一个实例化的Jq对象
        }

        Jq.prototype.css = function(styleName,styleValue){
            console.log("css方法执行了");
            this.eles.style[styleName] = styleValue;
            // css之后 实现链式 返还this ，this就是当前对象；
            return this;
        }
        Jq.prototype.click = function(cb){
            console.log("click执行了");
            this.eles.addEventListener("click",cb);
            return this;
        }

        

        function $(arg) {
            return new Jq(arg);
        }
        // 第一次实例化 Jq构造函数 $("li") ---》new Jq("li")
        $("li").eq(4).css("background","red")

        // $("li").eq(1).css("background","red").click(function(){
        //     console.log("点击了！！");
        // })

        // var res = $("li");
        // // res.css();
        // //    console.log(res);
        // var res2 = res.eq(1);
        // res2.css();
        // console.log(res2);

        // 链式操作 
        // 链式操作如何实现？
        // 1. 在构造函数的方法里返还this  2.在构造函数的方法里返还实例化对象
        // $("li").eq(1).css("background","red").click(function(){
        //     console.log("点击了");
        // })


// 实现一个 on方法 和 一个 animate方法 ；都支持链式
// $("div").animate({width:200},2000,function(){
//     console.log("运动完毕");
// })
    </script>
</body>

</html>